<template>
  <div class="my-info">
    <el-card class="box-card">
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" style="border-radius: 50%" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <div style="margin-top: 20px">
        <el-form ref="userInfoForm" :model="userInfo" label-width="100px">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.userName" :disabled="!editable"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="userInfo.phone" :disabled="!editable"></el-input>
          </el-form-item>
          <el-form-item label="身份">
            <el-input v-model="userInfo.identify" :disabled="!editable"></el-input>
          </el-form-item>
          <el-button type="primary" @click="toggleEdit">修改信息</el-button>
        </el-form>
      </div>

      <!-- 模态对话框 -->
      <el-dialog title="修改信息" :visible.sync="dialogVisible" width="30%">
        <el-form :model="editableUserInfo" label-width="100px">
          <el-form-item label="用户名">
            <el-input v-model="editableUserInfo.userName"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="editableUserInfo.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份">
            <el-input v-model="editableUserInfo.identify" disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="editableUserInfo.avatar" :src="editableUserInfo.avatar" class="avatar" style="border-radius: 50%" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUpdate">完成修改</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      editableUserInfo: {},
      dialogVisible: false,
      editable: false,
      uploadUrl: "http://localhost:8080/files/upload",
    };
  },

  mounted() {
    const info = JSON.parse(localStorage.getItem("user"));
    this.userInfo = info;
    this.editableUserInfo = { ...info };
  },

  methods: {
    handleAvatarSuccess(response) {
      this.userInfo.avatar = response.data;
      this.editableUserInfo.avatar = response.data; // 确保对话框中的头像也更新
    },

    beforeAvatarUpload(file) {
      const isImage = file.type.match("image/*");
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImage) {
        this.$message.error("上传头像图片只能是图像文件!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      return true;
    },

    toggleEdit() {
      this.editable = true;
      this.dialogVisible = true;
    },

    submitUpdate() {
      if(this.userInfo.identify == 'cl'){
        this.$http.put("/client/update", this.editableUserInfo)
        .then(response => {
          if (response.status === 200) {
            this.userInfo = { ...this.editableUserInfo }; // 更新用户信息
            localStorage.setItem('user', JSON.stringify(this.editableUserInfo));
            this.$message.success("修改成功");
            this.dialogVisible = false;
            this.editable = false;
            window.location.reload(); // 刷新页面
          } else {
            this.$message.error("修改失败");
          }
        })
        .catch(error => {
          console.error('更新用户信息失败:', error);
          this.$message.error('修改请求失败');
        });
    }else{
      this.$http.put("/admin/update", this.editableUserInfo)
        .then(response => {
          if (response.status === 200) {
            this.userInfo = { ...this.editableUserInfo }; // 更新用户信息
            localStorage.setItem('user', JSON.stringify(this.editableUserInfo));
            this.$message.success("修改成功");
            this.dialogVisible = false;
            this.editable = false;
          } else {
            this.$message.error("修改失败");
          }
        })
        .catch(error => {
          console.error('更新用户信息失败:', error);
          this.$message.error('修改请求失败');
        });
    }
      },
      
  },
}
</script>


<style scoped>
.my-info {
  background-image: url("../assets/img/main.jpg");
  background-size: cover;  /* 确保背景图像覆盖整个容器 */
  background-position: center;  /* 将图像置于容器中心 */
  background-repeat: no-repeat;  /* 防止背景图像重复 */
  background-attachment: fixed;  /* 固定背景图像，不随滚动条滚动 */
  height: 105vh;  /* 设置容器高度为视口的100% */
  width: 105%;  /* 设置容器宽度为100% */
}
.el-main {
  background-image: url('../assets/img/main.jpg'); /* 确保图片路径正确 */
}
.box-card {
  width: 100%;
  max-width: 400px; /* 根据需要调整 */
  margin: auto;
  padding-top: 20px; /* 增加内部顶部填充 */
  margin-left: 30%; /* 调整位置 */
  padding-bottom: 50px;
  background-color: #a7a0a0; /* 设置背景颜色 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 添加阴影 */
  border-radius: 10px; /* 设置圆角 */
  overflow: hidden; /* 确保内容不会溢出 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中子元素 */
  justify-content: flex-start; /* 垂直方向上从顶部开始排列 */
}
.avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  margin-bottom: 20px; /* 根据需要调整与表单的距离 */
}
.avatar-uploader {
  margin-bottom: 20px; 
  margin-left:20%;
  width: 178px;
  height: 178px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-upload {
  border: 1px dashed #0cdc60;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-container {
  height: 100%; /* 确保容器填满整个视口 */
}
</style>